// 生活界面展示
<template>
  <!-- 卡片标签 -->
  <el-card class="box-card">
    <!-- 表头 -->
    <el-tabs>
      <el-tab-pane label="记录美好生活"></el-tab-pane>
    </el-tabs>

    <el-form ref="form" :model="lifeModelForm" label-width="80px">
      <!-- 文本输入框 -->
      <el-form-item prop="lifeDescribe">
        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4}" placeholder="请输入内容" v-model="lifeModelForm.lifeDescribe"></el-input>
      </el-form-item>

      <!-- 图片上传 -->
        <!-- 
            handleRemove(file)  执行删除方法时需要注意
            1、 :auto-upload="true"  把默认的false改为true  否则会报data未定义的异常
            2、 ref='files'  记得加上否则会报handleRemove方法未定义
        -->
        <div class="tupiansahngchuan">
          <el-upload :action="fileUploadUrl" ref='files' list-type="picture-card" :auto-upload="true" :on-success="handleSuccess" multiple >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <!-- <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                    <i class="el-icon-download"></i>
                  </span> -->
                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
      
    </el-form>
    <!-- 底部横线 -->
      <el-tabs>
        <el-tab-pane></el-tab-pane>
        <el-row class="rowbutton">
          <el-button type="primary" @click="fileSubmit">提交记录</el-button>
        </el-row>
      </el-tabs>
    
    

  
  </el-card>
</template>

<script>
export default {
  // 引入页面自动刷新的方法
  inject: ['reload'],
  data() {
    return {

      fileUploadUrl:"http://localhost:8099/file/upload",
      /* 文本输入框 */
      textarea: '',
      /* 图片上传 */
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      lifeModelForm:{
        lifeDescribe: '',
        lifePhoto: [],
        lifeUrl:[],
      },
      virtualPath:'',
      
    }
  },
  methods: {
    //上传图片删除操作
    async handleRemove(file) {
      console.log(file)
      //移除数组中的数据
        let virtualPath = file.response.data.virtualPath
        //通过findIndex函数 获取数组中指定数据的位置
        let index = this.lifeModelForm.lifePhoto.findIndex(x => x === virtualPath)
        //删除数组中指定的数据
        this.lifeModelForm.lifePhoto.splice(index, 1)
        //删除服务中的文件
        let {
          data: result
        } = await this.$http.delete("/file/deleteFile", {
          params: {
            virtualPath: virtualPath
          }
        })
        // 获取到该组件调用handleRemove方法删除file对象
        this.$refs.files.handleRemove(file)
        if (result.status !== 200) return this.$message.error("删除图片失败")
        this.$message.success("删除图片成功")
    },

    //预览图片的方法   上传图片成功之后 图片需要展现时调用
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    //如果文件上传成功之后调用
    handleSuccess(response, file) {
        if (response.status !== 200) return this.$message.error("文件上传失败")
        file.name = response.data.fileName
        //获取虚拟路径
        let virtualPath = response.data.virtualPath
        // console.log(virtualPath)
        let path= response.data.urlPath
        // console.log(path)
        //将数据封装到Form表单中
        this.lifeModelForm.lifePhoto.push(virtualPath)
        this.lifeModelForm.lifeUrl.push(path)
    },

    //提交from表单数据
    async fileSubmit(){
        
          this.fileUploadUrl;
          this.lifeModelForm.lifePhoto=this.lifeModelForm.lifePhoto.join(",");
          this.lifeModelForm.lifeUrl=this.lifeModelForm.lifeUrl.join(",");
          // console.log(this.lifeModelForm.lifePhoto)
        
          const {data: result} = await this.$http.post('/life/AddLifeUpload',this.lifeModelForm)
          if(result.status !== 200){
          //页面自动刷新的方法
          this.reload() 
          return this.$message.error("记录提交失败！请重新提交");
          } 
          this.$message.success("记录提交成功！")
          //页面自动刷新的方法
          this.reload() 
        
    },
  }
  
}
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
  }

.item {
  padding: 18px 0;
  }

.box-card {
  width: 800px;
  margin-left: 335px;
  }
.rowbutton{
  margin-left: 660px;
}
.tupiansahngchuan{
  margin-left: 5px;
  margin-top: 20px;
}

.el-form-item {
    margin-bottom: 1%;
    margin-left: -10%;
}
</style>